@extends('layout.home')
@section('title', '管理报表')
@section('content')
    <style>
        *{padding: 0;margin: 0;}
        html,body{width: 100%;height: 100%;}
    </style>
    <div id="header" style="background-color: orangered;width: 100%;height: 50px;line-height: 50px;text-align: center">动态报表展示</div>
    <p style="text-align: center;font-size: 20px;font-weight: bold;color: black;">工时统计表</p>
    <div id="main1" style="height:300px;margin-bottom: 20px;"></div>
    <div id="main2" style="height:300px;"></div>



    <link rel="stylesheet" href="{{URL::asset('css/picktime.css')}}">
    <script src="{{URL::asset('js/picktime.js')}}"></script>
    <script type="text/javascript" src="{{URL::asset('js/layui.all.js')}}"></script>
    <script>





        function showdata(){
            let myChart1 = echarts.init(document.getElementById('main1'));
            let myChart2 = echarts.init(document.getElementById('main2'));
            //let t1 = $(".t1").val(),t2 = $(".t2").val(),t3 = $(".t3").val(),t4 = $(".t4").val();
            //myChart3.setOption(option3);//柱状图

            $.get("report_col", res => {
                console.log(res);
                let {bharr,dateline,jgarr,jmarr,pielist} = res;
                let option1 = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    legend: {
                        data: ['金工', '精密', '钣焊']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            axisLabel: {interval: 0,rotate:40},
                            data: []
                        },
                    ],
                    yAxis: [
                        {
                            type: 'value',
                        },
                    ],
                    series: [
                        {name: '金工', type: 'bar', stack: '工时', data: []},
                        {name: '精密', type: 'bar', stack: '工时', data: []},
                        {name: '钣焊', type: 'bar', stack: '工时', data: []},
                    ]
                };
                option1.series[0].data = jgarr;
                option1.series[1].data = jmarr;
                option1.series[2].data = bharr;
                option1.xAxis[0].data  = dateline;//时间坐标
                // ***************************************************************************************
                myChart1.setOption(option1);//柱状图
                // ********************************************************************************************
                let option2 ={
                    tooltip: {formatter: '{a} <br/>{b} : {c}%'},
                    series: [
                        {
                            name: '工时指标',
                            type: 'gauge',
                            detail: {formatter: '{value}%'},
                            data: []//[{value: 30, name: '完成率1'}]
                        },
                    ]
                };
                option2.series[0]['data'].push({value: pielist['wc'], name: '完成工时'}) ;
                //option2.series[0]['data'].push({value: pielist['wwc'], name: '剩余工时'}) ;
                $('#wcgs').html(`本月已完成工时:${pielist['wcs']}(小时)`);
                $('#sygs').html(`本月待完成工时:${pielist['wwcs']}(小时)`);
                $('#yysjlv').html(`时间进度:${res['yysjbl']}`);

                myChart2.setOption(option2);//柱状图

            })
        }

        showdata();
    </script>
    <script>


    </script>

    <style>#header {background-color: orangered;width: 100%;height: 50px;line-height: 50px;text-align: center;font-size: 20px;font-family: '黑体'}</style>
@endsection
